<!--
 * @Description: pop组件
 * @Author: sylvanas
 * @Date: 2019-09-18 19:47:26
 * @LastEditTime: 2019-10-15 19:17:53
 * @LastEditors: sylvanas
 -->

<template>
  <div class="grimm-popup" :style="{'z-index': zIndex}" :class="rootClass" v-show="isVisible">
    <div class="grimm-popup-mask" @touchmove.prevent @click="maskClick">
      <slot name="mask"></slot>
    </div>
    <div class="grimm-popup-container" @touchmove.prevent :class="containerClass">
      <div class="grimm-popup-content" v-if="$slots.default">
        <slot></slot>
      </div>
      <div class="grimm-popup-content" v-else v-html="content"></div>
    </div>
  </div>
</template>
<script>
import visibilityMinxin from '../../common/mixins/visibility';
import popupMinxin from '../../common/mixins/popup';
const COMPONENT_NAME = 'grimm-popup';
const EVENT_MASK_CLICK = 'mask-click';

export default {
  name: COMPONENT_NAME,
  mixins: [visibilityMinxin, popupMinxin],
  props: {
    type: {
      type: String,
      default: '',
    },
    mask: {
      type: Boolean,
      default: true,
    },
    content: {
      type: String,
      default: '',
    },
    center: {
      type: Boolean,
      default: true,
    },
    position: {
      type: String,
      default: '',
    },
    // // 是否自动关闭，后续待优化
    // selfClosing: {
    //   type: String,
    //   default: false,
    // },
    // // 自动关闭时间
    // closeTime: {
    //   type: Number,
    //   default: 0,
    // },
  },
  computed: {
    rootClass() {
      const cls = {
        'grimm-popup_mask': this.mask,
      };
      if (this.type) {
        cls[`grimm-${this.type}`] = true;
      }
      return cls;
    },
    containerClass() {
      const { center, position } = this;
      if (position) {
        return {
          [`grimm-popup-${position}`]: true,
        };
      }
      if (center) {
        return {
          'grimm-popup-center': true,
        };
      }
    },
  },
  methods: {
    maskClick(e) {
      this.$emit(EVENT_MASK_CLICK, e);
      if (this.maskClosable) {
        this.hide();
      }
    },
  },
};
</script>
<style lang="stylus" >
@import '../../common/stylus/variable.styl';

.grimm-popup {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 100;
  pointer-events: none;
}

.grimm-popup_mask {
  pointer-events: auto;

  .grimm-popup-mask {
    display: block;
  }
}

.grimm-popup-mask, .grimm-popup-container {
  position: absolute;
  width: 100%;
  height: 100%;
}

.grimm-popup-mask {
  display: none;
  overflow: hidden;
  opacity: $popup-mask-op;
  background-color: $popup-mask-bgc;
  pointer-events: auto;

  &::before {
    content: '.';
    display: block;
    width: 1px;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.1);
    margin-left: -10px;
  }
}

.grimm-popup-container {
  transform: translate(100%, 100%);
}

.grimm-popup-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  transform: translate(-100%, -100%);
  pointer-events: auto;
}

.grimm-popup-center, .grimm-popup-right, .grimm-popup-left {
  .grimm-popup-content {
    top: -50%;
    left: -50%;
    width: auto;
    max-width: 100%;
    transform: translate(0, 0);
  }
}

.grimm-popup-right, .grimm-popup-left {
  .grimm-popup-content {
    height: 100%;
    top: -100%;
  }
}

.grimm-popup-center {
  .grimm-popup-content {
    transform: translate(-50%, -50%);
  }
}

.grimm-popup-top {
  .grimm-popup-content {
    top: -100%;
    left: -100%;
    transform: translate(0, 0);
  }
}

.grimm-popup-right {
  .grimm-popup-content {
    top: -100%;
    right: 100%;
  }
}

.grimm-popup-left {
  .grimm-popup-content {
    left: -100%;
  }
}
</style>
